
<template>
  <div class="app-download-container">
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="20" :md="16" :lg="12">
        <div class="download-card">
          <!-- 头部LOGO区域 -->
          <div class="logo-area">
            <img src="@/assets/logo/logo.png" alt="APP Logo">
            <h2>OraMemo</h2>
            <p>最新版本 v1.0.0</p>
          </div>

          <!-- 下载按钮区域 -->
          <div class="btn-group">
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="handleDownload('android')"
              class="download-btn">
              Android 下载
            </el-button>
            <el-button
              type="success"
              icon="el-icon-download"
              @click="handleDownload('ios')"
              class="download-btn">
              iOS 下载
            </el-button>
          </div>

          <!-- 引导步骤 -->
          <div class="guide-steps">
            <el-steps :active="1" align-center>
              <el-step title="下载APP" description="点击上方按钮下载"></el-step>
              <el-step title="安装应用" description="打开下载的文件"></el-step>
              <el-step title="开始使用" description="注册/登录账号"></el-step>
            </el-steps>
          </div>

          <!-- 二维码区域 -->
          <div class="qrcode-area">
            <h3>扫码下载</h3>
            <img src="@/assets/images/a08Oq5da6l.png" alt="下载二维码">
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    handleDownload(type) {
      if(type === 'android') {
        window.location.href = 'https://api.oramemo.ai/ora_memo.release.apk';
      } else {
        this.$message.info('iOS版本请前往App Store搜索下载');
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.app-download-container {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  .download-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;

    .logo-area {
      margin-bottom: 30px;
      img {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
      }
      h2 {
        margin: 10px 0;
        color: #333;
      }
      p {
        color: #999;
      }
    }

    .btn-group {
      margin: 30px 0;
      .download-btn {
        margin: 0 10px;
        padding: 12px 30px;
      }
    }

    .guide-steps {
      margin: 40px 0;
    }

    .qrcode-area {
      margin-top: 30px;
      img {
        width: 150px;
        height: 150px;
        margin: 15px auto;
        display: block;
      }
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .app-download-container {
    padding: 10px;

    .download-card {
      padding: 20px 15px;

      .btn-group {
        .download-btn {
          margin: 5px 0;
          width: 100%;
        }
      }
    }
  }
}
</style>
